﻿
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>boss销售</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
    <link rel="stylesheet" type="text/css" href="../css/boss_rader.css"/>
</head>
<body>
    <div class="container">
        <div class="header f16">
            <div class="header_left">
                当前查看: <span class="department"></span>
            </div>
            <div class="header_right">
                <span class="tappatrment f14">切换部门</span>
                <img src="../images/boss/15.png">
            </div>
        </div>
        <div class="content">
            <div class="weui-flex navbar">
                <div class="weui-flex__item">
                    <div class="placeholder active_navbar">汇总</div>
                </div>
                <div class="weui-flex__item" onclick="toUrl('rankingList.html')">
                    <div class="placeholder">销售排行</div>
                </div>
                <div class="weui-flex__item" onclick="toUrl('aiAnalysis.html')">
                    <div class="placeholder">AI分析</div>
                </div>
            </div>
            <div class="weui-flex taps tap1" id='1'>
                <div class="weui-flex__item"><div id="d1" class="placeholder actived_item active_item">汇总</div></div>
                <div class="weui-flex__item"><div id="d2" class="placeholder actived_item">昨日</div></div>
                <div class="weui-flex__item"><div id="d3" class="placeholder actived_item">近7天</div></div>
                <div class="weui-flex__item"><div id="d4" class="placeholder actived_item">近30天</div></div>
            </div>
            <div class="weui-flex count_box f15">
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="total_count">
                            <div class="count">客户总数</div>
                            <div class="count_title f20" id="clientCount">加载中</div>
                            <!-- <div class="count_title">无对比</div> -->
                        </div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">跟进总数</div>
                        <div class="count_title f20" id="followUp">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">浏览总数</div>
                        <div class="count_title f20" id="browse">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
            </div>
            <div class="weui-flex count_box f15">
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">被转发总数</div>
                        <div class="count_title f20" id="shareTotal">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">被保存总数</div>
                        <div class="count_title f20" id="saveTotal">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">被点赞总数</div>
                        <div class="count_title f20" id="likeTotal">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="rate">
            <div class="rate_title f18">成交率漏斗</div>
            <div class="mask_box">
                <div class="mask mask_item1">
                    <span class="rate_count" id="rate_count1"></span>
                    <!-- <div class="down">
                        <span>-24</span>
                        <img src="../images/boss/16.png">
                    </div> -->
                </div>
                <div class="mask mask_item2">
                    <span class="rate_count" id="rate_count2"></span>
                    <!-- <div class="down up_item2">
                        <span>-24</span>
                        <img src="../images/boss/17.png">
                    </div> -->
                </div>
                <div class="mask mask_item3">
                    <span class="rate_count" id="rate_count3"></span>
                    <!-- <div class="down up_item3">
                        <span>-24</span>
                        <img src="../images/boss/17.png">
                    </div> -->
                </div>
                <div class="mask_footer">
                    <div class="mask_item4">
                        <span id="rate_count4"></span>
                    </div>
                    <!-- <div class="up_item4">
                        <span>-24</span>
                        <img src="../images/boss/17.png">
                    </div> -->
                </div>
            </div>
            <div class="weui-flex rate_point">
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c1"></span>
                        <span id="circular1"></span>
                    </div>
                </div>
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c2"></span>
                        <span id="circular2"></span>
                    </div>
                </div>
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c3"></span>
                        <span id="circular3"></span>
                    </div>
                </div>
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c4"></span>
                        <span id="circular4"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="customer">
            <div class="rate_title f18">客户统计</div>
            <div class="rate_title f18">新增客户数</div>
            <div class="weui-flex navbar tap2" id='2'>
                <div class="weui-flex__item"><div id="n1" class="placeholder actived_item active_item">近七天</div></div>
                <div class="weui-flex__item"><div id="n2" class="placeholder actived_item">近15天</div></div>
                <div class="weui-flex__item"><div id="n3" class="placeholder actived_item">近30天</div></div>
            </div>
            <div id="main1" style="width: 95%;height:350px;margin-left: auto;margin-right: auto;"></div>
        </div>
        <div class="customer">
            <div class="rate_title f18">咨询客户数</div>
            <div class="weui-flex navbar tap3" id='3'>
                <div class="weui-flex__item"><div id="n4" class="placeholder actived_item active_item">近七天</div></div>
                <div class="weui-flex__item"><div id="n5" class="placeholder actived_item">近15天</div></div>
                <div class="weui-flex__item"><div id="n6" class="placeholder actived_item">近30天</div></div>
            </div>
            <div id="main2" style="width: 95%;height:350px;margin-left: auto;margin-right: auto;"></div>
        </div>
        <div class="customer">
            <div class="rate_title f18">客户跟进数</div>
            <div class="weui-flex navbar tap4" id='4'>
                <div class="weui-flex__item"><div id="n7" class="placeholder actived_item active_item">近七天</div></div>
                <div class="weui-flex__item"><div id="n8" class="placeholder actived_item">近15天</div></div>
                <div class="weui-flex__item"><div id="n9" class="placeholder actived_item">近30天</div></div>
            </div>
            <div id="main3" style="width: 95%;height:350px;margin-left: auto;margin-right: auto;"></div>
        </div>
        <div class="customer">
            <div class="rate_title f18">客户与我的互动</div>
            <div id="main4" style="width: 95%;height:350px;margin-left: auto;margin-right: auto;"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../plugins/echarts/js/echarts.min.js"></script>
<script type="text/javascript">
   var clientDateList = [];  //日期轴数据
   var clientTotalList = []; //值数据
   var getImByDate = [];
   var getImByvalue = [];
   var followByDate = [];
   var followByvalue = []
   //标签切换
    $(".weui-flex").on("click",function(e){
        var currid = e.currentTarget.id;
        var id = e.target.id;
        if(id != 1 && id != 2 && id != 3 && id != 4 && id != ""){
            $(".tap" + currid + " .actived_item").removeClass("active_item")
            $("#" + id).addClass("active_item");
        }
        if(id == "n1" || id == "n2" || id == "n3"){
            clientDateList = [];  //日期轴数据
            clientTotalList = []; //值数据
        }
        if(id == "n4" || id == "n5" || id == "n6"){
            getImByDate = [];  //日期轴数据
            getImByvalue = []; //值数据
        }
        if(id == "n7" || id == "n8" || id == "n9"){
            followByDate = [];
            followByvalue = []
        }
        switch(id)
        {
            case "n1":loadClientData(7);break;
            case "n2":loadClientData(15);break;
            case "n3":loadClientData(30);break;
            case "n4":loadgetImByData(7);break;
            case "n5":loadgetImByData(15);break;
            case "n6":loadgetImByData(30);break;
            case "n7":loadFollowByData(7);break;
            case "n8":loadFollowByData(15);break;
            case "n9":loadFollowByData(30);break;
            case "d1":getTotalByDate();break;
            case "d2":getTotalByDate(1);break;
            case "d3":getTotalByDate(7);break;
            case "d4":getTotalByDate(30);break;
        }
    })

    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart4 = echarts.init(document.getElementById('main4'));

    var option1 = {
        title: {
            text: ''
        },
        xAxis: {
            type: 'category',
            axisTick: {show: false},//是否显示刻度线
            data: clientDateList.map(function (item) {
                return item.date;
            }),
            axisLabel: {
                formatter: function (value, idx) {
                    var date = new Date(value);
                    return [date.getMonth() + 1, date.getDate()].join('-');
                }
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            boundaryGap: ['20%', '20%'] //两边留白
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {show: false},
            axisTick: {show: false},//是否显示刻度线
            min:0,
            max:100,
            axisLabel:{
              texts:[10,40,60,80,100]
            }
        },
        color: {
            type: 'linear',
            colorStops: [{offset: 1, color: '#FE7B00' }], // 100% 处的颜色
            globalCoord: false, // 缺省为 false
        },
        series: [{
            name: '',
            type: 'line',
            smooth: true, //是否显示小圆点
            symbol: 'circle',//实体圆点
            symbolSize:10, //圆点大小
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color:"#151D32" //标点文字颜色
                }
            },
            itemStyle : {
                normal : {
                    color:'#FA8429', //小圆点颜色
                    borderWidth:"2", //边框
                    borderColor:"#fff",
                    lineStyle:{
                        color:'#FD892D'
                    }
                }
            },
            data: clientTotalList,
        }]
    };
    var option2 = {
        title: {
            text: ''
        },
        xAxis: {
            type: 'category',
            axisTick: {show: false},//是否显示刻度线
            data: getImByDate.map(function (item) {
                return item.date;
            }),
            axisLabel: {
                formatter: function (value, idx) {
                    var date = new Date(value);
                    return [date.getMonth() + 1, date.getDate()].join('-');
                }
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            boundaryGap: ['20%', '20%'] //两边留白
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {show: false},
            axisTick: {show: false},//是否显示刻度线
            min:0,
            max:100,
            axisLabel:{
              texts:[10,40,60,80,100]
            }
        },
        color: {
            type: 'linear',
            colorStops: [{offset: 1, color: '#FE7B00' }], // 100% 处的颜色
            globalCoord: false, // 缺省为 false
        },
        series: [{
            name: '',
            type: 'line',
            smooth: true, //是否显示小圆点
            symbol: 'circle',//实体圆点
            symbolSize:10, //圆点大小
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color:"#151D32" //标点文字颜色
                }
            },
            itemStyle : {
                normal : {
                    color:'#FA8429', //小圆点颜色
                    borderWidth:"2", //边框
                    borderColor:"#fff",
                    lineStyle:{
                        color:'#FD892D'
                    }
                }
            },
            data: getImByvalue,
        }]
    };
    var option3 = {
        title: {
            text: ''
        },
        xAxis: {
            type: 'category',
            axisTick: {show: false},//是否显示刻度线
            data: followByDate.map(function (item) {
                return item.date;
            }),
            axisLabel: {
                formatter: function (value, idx) {
                    var date = new Date(value);
                    return [date.getMonth() + 1, date.getDate()].join('-');
                }
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            boundaryGap: ['20%', '20%'] //两边留白
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {show: false},
            axisTick: {show: false},//是否显示刻度线
            min:0,
            max:100,
            axisLabel:{
              texts:[10,40,60,80,100]
            }
        },
        color: {
            type: 'linear',
            colorStops: [{offset: 1, color: '#FE7B00' }], // 100% 处的颜色
            globalCoord: false, // 缺省为 false
        },
        series: [{
            name: '',
            type: 'line',
            smooth: true, //是否显示小圆点
            symbol: 'circle',//实体圆点
            symbolSize:10, //圆点大小
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color:"#151D32" //标点文字颜色
                }
            },
            itemStyle : {
                normal : {
                    color:'#FA8429', //小圆点颜色
                    borderWidth:"2", //边框
                    borderColor:"#fff",
                    lineStyle:{
                        color:'#FD892D'
                    }
                }
            },
            data: followByvalue,
        }]
    };
    var option4 = {
        dataset: {
            source: [
                ['score', 'amount', 'product']//颜色 x值 y值
            ]
        },
        grid: {containLabel: true},
        xAxis: {
            splitLine: {show: false},
            axisTick: {show: false},//是否显示刻度线
            name: ''
        },
        yAxis: {
            type: 'category',
            splitLine: {show: false},
            axisTick: {show: false},//是否显示刻度线
        },
        visualMap: {
            show:false,
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['High Score', 'Low Score'],
            // Map the score column to color
            dimension: 0,
            inRange: {
                color: ['#B2B2B2','#FDC844','#FEAB2B']
            }
        },
        series: [
            {
                type: 'bar',
                barWidth: 20,
                label: {
                normal: {
                    show: true,
                    position: 'right',
                    color:"#151D32" //标点文字颜色
                    }
                },
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                }
            }
        ]
    };

    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);

    var staffId = 1;
    //加载成交率
    function loadProbability() {
        var days = 30;  //天数
        ajaxGet(siteApiList.GetTotalProbability+"?staffid="+staffId + "&days=" + days, function (data) {
            if (!isJsonSuccess(data))
                return;
            //绑定图表
            var values = data.Data.value;
            var column = data.Data.column;
            if(values.length > 0){
                $("#rate_count1").text(values[0]);
                $("#rate_count2").text(values[1]);
                $("#rate_count3").text(values[2]);
                $("#rate_count4").text(values[3]);
            }
            if(column.length > 0){
                $("#circular1").text(column[0]);
                $("#circular2").text(column[1]);
                $("#circular3").text(column[2]);
                $("#circular4").text(column[3]);
            }
        })
    }

    //加载客户数
    function loadClientData(days) {
        ajaxGet(siteConfig.apiDomain + "/addressbook/GetClientByDate" +"?staffid="+staffId + "&days=" + days, function (data) {
            if (!isJsonSuccess(data))
                return;
            if(data.Code == 0){
                var list = data.Data.value;
                var values = mapData(list,days);
                for(var h = 0; h < values.length; h++){
                    clientDateList.push(values[h].newdates);
                    if(values[h].Total){
                        clientTotalList.push(values[h].Total);
                    }else{
                        clientTotalList.push(0);
                    }
                }
                myChart1.setOption({
                    xAxis: {data : clientDateList},
                    series: [{data: clientTotalList}]
                })
            }
        })
    }

    //加载客户咨询数
    function loadgetImByData(days) {
        ajaxGet(siteConfig.apiDomain + "/AddressBook/GetImByDate" +"?staffid="+staffId + "&days=" + days, function (data) {
            if (!isJsonSuccess(data))
                return;
            if(data.Code == 0){
                var list = data.Data.value;
                var values = mapData(list,days);
                for(var h = 0; h < values.length; h++){
                    getImByDate.push(values[h].newdates);
                    if(values[h].Total){
                        getImByvalue.push(values[h].Total);
                    }else{
                        getImByvalue.push(0);
                    }
                }
                myChart2.setOption({
                    xAxis: {data : getImByDate},
                    series: [{data: getImByvalue}]
                })
            }
        })
    }

    //加载客户跟进数
    function loadFollowByData(days){
        ajaxGet(siteConfig.apiDomain + "/AddressBook/GetFollowByDate" +"?staffid="+staffId + "&days=" + days, function (data) {
            if (!isJsonSuccess(data))
                return;
            if(data.Code == 0){
                var list = data.Data.value;
                var values = mapData(list,days);
                for(var h = 0; h < values.length; h++){
                    followByDate.push(values[h].newdates);
                    if(values[h].Total){
                        followByvalue.push(values[h].Total);
                    }else{
                        followByvalue.push(0);
                    }
                }
                myChart3.setOption({
                    xAxis: {data : followByDate},
                    series: [{data: followByvalue}]
                })
            }
        })
    }

    /*
    *加载客户与我的互动
    * 6	咨询产品、 7保存电话、 8名片点赞、 9、拨打电话、 10添加印象
    */
    function loadActionByData(){
        ajaxGet(siteConfig.apiDomain + "/AddressBook/GetActionByDate" +"?staffid="+staffId, function (data) {
            if (!isJsonSuccess(data))
                return;
            if(data.Code == 0){
                var sourceValue = [['score', 'amount', 'product']];
                var list = data.Data.value;
                for(var i = 0; i < list.length; i++){
                   if(list[i].ActionType == 6){
                    sourceValue.push([list[i].Total,list[i].Total,"咨询产品"])
                   }
                   if(list[i].ActionType == 7){
                    sourceValue.push([list[i].Total,list[i].Total,"保存电话"])
                   }
                   if(list[i].ActionType == 8){
                    sourceValue.push([list[i].Total,list[i].Total,"名片点赞"])
                   }
                   if(list[i].ActionType == 9){
                    sourceValue.push([list[i].Total,list[i].Total,"拨打电话"])
                   }
                   if(list[i].ActionType == 10){
                    sourceValue.push([list[i].Total,list[i].Total,"添加印象"])
                   }
                }
                myChart4.setOption({
                    dataset: {source: sourceValue}
                });
            }
        })
    }

    /*
    * 汇总统计
    * 转发总数 = 13转发动态
    * 保存总数 = 7保存电话
    * 浏览总数 = 0查看商品 + 1查看官网 + 4查看名片 + 5查看动态
    * 点赞总数 = 10名片标签点赞 +  11个性签名点赞
    */
    function getTotalByDate (days){
        if(days){
            days = "&days=" + days;
        }else{
            days = "";
        }
        ajaxGet(siteConfig.apiDomain + "/addressbook/GetTotalByDate" +"?staffid="+staffId + days, function (data) {
            if (!isJsonSuccess(data))
                return;
                //客户总数 , 跟进总数, 浏览总数, 转发总数, 保存总数, 点赞总数
                var clientCount = 0 , followUp = 0 , browse = 0 , shareTotal = 0 , saveTotal = 0 , likeTotal = 0;
                if(data.Code == 0){
                    var list = data.Data.ActionTotalList;
                    var clientCount = data.Data.ClientCount;
                    for(let i = 0; i < list.length; i++){
                        //跟进
                        if(list[i].ActionType == 15){
                            followUp = list[i].Total;
                        }
                        //浏览
                        if(list[i].ActionType == 0 || list[i].ActionType == 1 || list[i].ActionType == 4 || list[i].ActionType == 5){
                            browse += list[i].Total
                        }
                        //转发总数
                        if(list[i].ActionType == 13){
                            shareTotal = list[i].Total;
                        }
                        //保存总数
                        if(list[i].ActionType == 7){
                            saveTotal = list[i].Total;
                        }
                        //点赞总数
                        if(list[i].ActionType == 10 || list[i].ActionType == 11){
                            likeTotal += list[i].Total;
                        }
                    }
                    $("#clientCount").text(clientCount);
                    $("#followUp").text(followUp);
                    $("#browse").text(browse);
                    $("#shareTotal").text(shareTotal);
                    $("#saveTotal").text(saveTotal);
                    $("#likeTotal").text(likeTotal);
                }
            }
        )
    }

    $(function () {
        loadDepartment();   //加载部门
        loadProbability();
        loadClientData(7);
        loadgetImByData(7);
        loadFollowByData(7)
        loadActionByData();
        getTotalByDate();
        loadBtn();
    })

    $(window).resize(function() {//图表自适应
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
    });

    //加载部门
    function loadDepartment(){
        var department= getQueryString("name") =="" ? "多个部门": getQueryString("name");
        $(".department").html(department);
    }
    
    function loadBtn(){
        $(".tappatrment").click(function(){toUrl("selectDepartment.html?backurl="+encodeURIComponent("bossRadar.html?"))});
    }

    //处理接口返回图表数据格式
    function mapData(list,days){
        var dateList = getDates(days);
        var values = [];
        for(var k = 0; k < dateList.length; k++){
            values.push({newdates:(dateList[k].year +  "-" + dateList[k].newdates),year:dateList[k].year});
        }
        for(var j = 0; j < values.length; j++){
            for(var i = 0; i < list.length; i++){
                list[i].showDate = list[i].Date.substr(5,5);
                list[i].year = list[i].Date.substr(0,4);
                if(values[j].newdates == (list[i].year + "-" + list[i].showDate)){
                    values[j].Total = list[i].Total;
                }
            }
        }
        return values;
    }

    //获取当前时间多少天后的日期和对应星期
    function getDates(days,todate=getCurrentToday()) {//todate默认参数是当前日期
        var dateArry = [];
        for (var i = days-1; i >=0; i--) {
            var dateObj = dateLater(todate, -i);
            dateArry.push(dateObj)
        }
        return dateArry;
    }


    //当前时间获取
    function getCurrentToday() {
        const date = new Date()
        var year = date.getFullYear();
        var mouths = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
        var day = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
        var currentdate = year + "-" + mouths + "-" + day;
        return currentdate
    }

    /**
     * 传入时间后几天
     * param：传入时间：dates:"2018-04-02",later:往后多少天
     */
    function dateLater(dates,later) {
        let dateObj = {};
        let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
        let date = new Date(dates);
        date.setDate(date.getDate() + later);
        let day = date.getDay();
        dateObj.dates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "月" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate()) + "日";
        dateObj.newdates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
        dateObj.year = date.getFullYear();
        dateObj.month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
        dateObj.day = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
        dateObj.week = show_day[day];
        return dateObj;
    }
</script>
</html>